<template>
  <div />
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'

// 定义成功弹窗配置
const successDialogConfig = ref({
  customClass: 'success-message-box',
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'success',
})

/**
 * 显示成功弹窗
 * @param {string} message - 弹窗消息
 * @param {string} title - 弹窗标题
 * @param {Object} options - 额外配置选项
 * @returns {Promise}
 */
const showSuccessDialog = (message, title = '成功提示', options = {}) => {
  return ElMessageBox.confirm(message, title, {
    ...successDialogConfig.value,
    ...options,
  })
}

// 导出组件和方法
defineExpose({
  showSuccessDialog,
})
</script>

<style scoped>
/* 自定义成功弹窗样式 */
:deep(.el-message-box.success-message-box) {
  border-color: var(--success-color) !important;
  border-radius: 8px;
}

:deep(.el-message-box.success-message-box .el-message-box__header) {
  border-bottom-color: var(--success-color) !important;
  padding: 16px 24px;
}

:deep(.el-message-box.success-message-box .el-message-box__title) {
  color: var(--success-color) !important;
  font-size: 18px;
  font-weight: 600;
}

:deep(.el-message-box.success-message-box .el-message-box__status) {
  color: var(--success-color) !important;
  font-size: 24px;
}

:deep(.el-message-box.success-message-box .el-message-box__content) {
  color: #333;
  padding: 24px;
  font-size: 16px;
}

:deep(.el-message-box.success-message-box .el-message-box__btns) {
  padding: 0 24px 24px;
}

:deep(.el-message-box.success-message-box .el-button--primary) {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
}

:deep(.el-message-box.success-message-box .el-button--primary:hover) {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}
</style>
